<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue.js</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		<button v-on:click="warn('Form cannot be submitted yet.', $event)">
			Submit
		</button>
		<!-- 阻止单击事件继续传播 -->
		<button v-on:click.stop="doThis">doThis</button>
		<!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit" action="demo1.html" method="GET">
        	<button>onSubmit</button>
        </form>
        <br>
        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat" href="http://www.baidu.com">doThat</a>
        <br>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent="submitPrevent" action="demo1.html" method="GET">
        	<button>submitPrevent</button>
        </form>
        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doWhat" v-on:click="dbLink">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
		<!-- 即事件不是从内部元素触发的 -->
		<div v-on:click.self="doSelf">doSelf</div>

		<!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doOnce">doOnce</a>
        <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
        <!-- 而不会等待 `onScroll` 完成  -->
        <!-- 这其中包含 `event.preventDefault()` 的情况 -->
        <div v-on:scroll.passive="onScroll">onScroll</div>

        <form action="demo1.html" method="GET">
        	<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
            <input v-on:keyup.13="submit">
            <!-- 同上 -->
            <input v-on:keyup.enter="submit">
            <!-- 缩写语法 -->
            <input @keyup.enter="submit">
            <!-- 缩写语法 -->
			<input @keyup.tab="submit">
			<!-- 缩写语法 -->
			<input @keyup.delete="deletes">
			<input @keyup.esc="escs">
			<input @keyup.space="space">
			<input @keyup.space="up">
			<input @keyup.space="down">
			<input @keyup.space="left">
			<input @keyup.space="right">
        </form>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			methods: {
				warn: function (message, enent) {
					// 现在我们可以访问原生事件对象
					if (event) {
						event.preventDefault()
					} 
					alert(message)
				},
				doThis: function () {
					alert('.stop start ...')
				},
				onSubmit: function () {
					alert('.prevent start ...')
				},
				submitPrevent: function () {
					alert('Hello World')
				},
				doWhat: function () {
					alert('.capture start ... ')
				},
				dbLink: function () {
					alert('Hello World')
				},
				doSelf: function () {
					alert('self start ... ')
				},
				doOnce: function () {
					alert('once start ... ')
				},
				onScroll: function () {
					alert('onScroll start ...')
				},
				submit: function () {
					alert('submit start ...')
				},
				deletes: function () {
					alert('delete start ... ')
				},
				escs: function() {
					alert('escs start ... ')
				},
				space: function() {
					alert('space start ... ')
				},
				up: function() {
					alert('up start ... ')
				},
				down: function() {
					alert('down start ... ')
				},
				left: function() {
					alert('left start ... ')
				},
				right: function() {
					alert('right start ... ')
				}

			}
		})
	</script>
</body>
</html>